<style lang="scss" scoped>
.process_index {

    .procee_temp_content {
        display: inline-block;
        width: 100%;
        height: 110px;
        line-height: 1.5;
        font-size: 12px;
        border: 1px solid #dddee1;
        border-radius: 4px;
        color: #495060;
        background-color: #fff;
        background-image: none;
        position: relative;
        cursor: text;
        transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        overflow: auto;
        .tempItem {
            padding: 8px 4px;
            position: relative;
            .delIcon {
                text-align: center;
                line-height: 18px;
                cursor: pointer;
                width: 18px;
                height: 18px;
                position: absolute;
                right: 15px;
                top: 5px;
                color: #fff;
                display: block;
            }
            &:hover {
                background: #69B5ED;
                .delIcon {
                    display: block;
                }
            }
        }
    }
    .procee_temp_add {
        float: left;
        text-align: center;
        margin: 5px 0 10px;
    }
}
</style>
<template>
    <div class="process_index">
        <div class="procee_temp_content">
            <div v-if="!isShownull && !isShowWarnByPatient && !isShowWarnByParent" :key="index" v-for="(item,index) in nowhpoList"  class="tempItem">
                {{item}}
                <p class="delIcon" @click.stop="delIcon(item,index)">
                    <Icon size=18 type="ios-close"></Icon>
                </p>
            </div>
            <div v-if="isShownull && !isShowWarnByPatient && !isShowWarnByParent" style="width:140px;height:24px;top:0;left:0;bottom:0;right:0;margin:auto;position:absolute;">
                <img style="display:block;float:left;" src="/static/icon/add.png" /><span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
            </div>
            <warn @callback="getpatientChpo" v-if="isShowWarnByPatient"></warn>
            <warn @callback="getchpoByMessage" v-if="isShowWarnByParent"></warn>
        </div>
        <div class="procee_temp_add">
            <Button size="small" type="primary" @click='addmodal'>添加词条</Button>
        </div>
        <!-- 模版名称-->
        <Modal v-model="addModal" title="添加词条" width="600" :mask-closable="false" @on-ok='choice'>
            <div class="sample-main">
                <Select v-model='addchoice' :multiple='true' filterable remote :remote-method="remoteMethod1" :loading="loading1" placeholder="请输入词条信息">
                    <Option v-for="(option, index) in tempName" :value="option.value" :key="index">{{option.label}}</Option>
                </Select>
            </div>

        </Modal>
    </div>
</template>
<script>
import { congenica } from 'api/index.js';
import {Loading} from 'element-ui';
import warn from '@/components/warn.vue';
export default {
    name: 'hpo',
    props: ['message'],
    data() {
        return {
            deleteFlag: false,
            isShowWarnByPatient:false, //通过病人id查出来的chpowarn
            isShowWarnByParent:false,  //通过父元素失去焦点查出来的chpo
            faMessage:"",//父组件传过来的关键字
            isShownull:false,
            chpoModelList: [],
            addModal: false,
            tempName: [],
            loading1: false,
            patientId:"",
            addchoice: [],
            nowhpoList: [],
        }
    },
    methods: {
        // 数组去重
        heavy(arr) {
            var res = [];
            var json = {};
            for (var i = 0; i < arr.length; i++) {
                if (!json[JSON.stringify(arr[i])]) {
                    res.push(arr[i]);
                    json[JSON.stringify(arr[i])] = 1;
                }
            }
            return res;
        },
        //选择确定
        choice() {
            var _this = this;
            _this.nowhpoList=[]
            this.addchoice.forEach(function(ele) {
                let aa=ele.substring(0,ele.indexOf('('));
                let bb=ele.substring(ele.indexOf('(')+1,ele.lastIndexOf(')'))
                let obj = {
                    'chpo_num':aa,
                    'chpo_en': null,
                    'chpo_cn': bb,
                }
                _this.chpoModelList.push(obj)
            })
            _this.chpoModelList = _this.heavy(_this.chpoModelList)
            _this.chpoModelList.forEach(function(element) {
                _this.nowhpoList.push(element.chpo_num + '(' + element.chpo_cn + ')')
            }, this);
            this.$store.state.chpoModelList=this.chpoModelList;
            this.$emit('update', _this.nowhpoList);
            // _this.addpatientChpo()
        },
        remoteMethod1(query) {
            if (query !== '') {
                this.loading1 = true;
                setTimeout(() => {
                    this.loading1 = false;
                    this.getchpo(query);
                }, 200);
            } else {
                this.tempName = [];
            }
        },
        //添加词条弹窗
        addmodal() {
            this.addModal = true;
            this.addchoice = [];
            this.tempName = [];
        },
        //删除词条
        delIcon(item, index) {
            this.chpoModelList.splice(index, 1)
            this.nowhpoList.splice(index, 1)
            this.$store.state.chpoModelList=this.chpoModelList;
            this.$emit('update',this.nowhpoList);
        },
        addpatientChpo() {
            let obj = {
                patientId: this.patientId,
                chpoModelList: this.chpoModelList
            }
            var that = this;
            congenica.addpatientChpo(obj).then((res) => {
                if (res.returnCode == 0 || res.returnCode == 200) {
                    this.$Message.success('hpo词条' + res.msg)
                    that.getpatientChpo()
                } else {
                    this.$Message.error(res.msg);
                }
            })
        },
        getpatientChpo() {
            let obj = {
                patientId: this.patientId
            }
            var that = this;
            var loadingInstance = Loading.service({target:document.querySelector(".process_index")});
            console.log(loadingInstance)
            congenica.getpatientChpo(obj).then((res) => {
                console.log(res)
                if (res.returnCode == 0 || res.returnCode == 200) {
                    that.nowhpoList = []
                    res.data.forEach(function(element) {
                        that.nowhpoList.push(element.chpo_num + '(' + element.chpo_cn + ')')
                    }, this);
                    that.chpoModelList = res.data;
                    this.$store.state.chpoModelList=that.chpoModelList;
                    this.$store.state.oldchpoModelList=M.clone(that.chpoModelList);
                    this.$emit('update', that.nowhpoList); //将词条内容传给父组件
                } else {
                    this.$Message.error(res.msg);
                }
                loadingInstance.close();
                this.isShowWarnByPatient = false;
                this.isShowWarnByParent = false;
            }).catch(error => {
                loadingInstance.close();
                this.isShowWarnByPatient = true;
                this.isShowWarnByParent = false;
            });
        },
        //获取hpo词条
        getchpo(name) {
            let obj = {
                "queryStr": name
            }
            var that = this;
            congenica.getChpo(obj).then((res) => {
                if (res.returnCode == 0 || res.returnCode == 200) {
                    that.tempName = []
                    res.data.forEach(function(element) {
                        let obj = {
                            value: element.chpo_num + '(' + element.chpo_cn + ')',
                            label: element.chpo_num + '(' + element.chpo_cn + ')'
                        }
                        that.tempName.push(obj)
                    }, this);
                } else {
                    this.$Message.error(res.msg);
                }
            })

        },
        //通过父组件的失去焦点信息 来获取hpo
        getchpoByMessage(){
            let obj = {
                "queryStr": this.faMessage
            };
            var that = this;
            that.nowhpoList = [];
            var loadingInstance = Loading.service({
                target:document.querySelector(".process_index"),
                "text":"数据加载中，请稍后"
            });
            congenica.getChpo(obj).then((res) => {
                if (res.returnCode == 0 || res.returnCode == 200) {
                    that.nowhpoList = []
                    res.data.forEach(function(element) {
                        that.nowhpoList.push(element.chpo_num + '(' + element.chpo_cn + ')')
                    }, this);
                    that.chpoModelList = res.data;
                    this.$store.state.chpoModelList = that.chpoModelList;
                    this.$store.state.oldchpoModelList = M.clone(that.chpoModelList);
                } else {
                    this.$Message.error(res.msg);
                }
                loadingInstance.close();
                this.isShowWarnByPatient = false;
                this.isShowWarnByParent = false;
            }).catch(error => {
                loadingInstance.close();
                this.isShowWarnByPatient = false;
                this.isShowWarnByParent = true;
            });
        }
    },
    watch: {
        'message': function(val, oldval) {
            this.faMessage = val;
            this.getchpoByMessage();
        },
        "chpoModelList":function(val,olval){
            if(!this.chpoModelList || this.chpoModelList.length==0){
                this.isShownull = true;
            }else{
                this.isShownull = false;
            }
        }
    },
    components:{
        warn
    },
    created(){
        this.patientId = M.url().patientId ? M.url().patientId : this.$store.state.patientid ? this.$store.state.patientid : "";
    },
    mounted() {
        this.nowhpoList = [];
        this.$store.state.chpoModelList=[];
        this.$store.state.oldchpoModelList=[];
        this.patientId = M.url().patientId ? M.url().patientId : this.$store.state.patientid ? this.$store.state.patientid : "";
        if(this.patientId != ''){
            this.getpatientChpo()
        }
    },
}
</script>


